<template>
  <!-- 地区级联选择器 安装 npm i province-city-china -s  -->
  <div class="region-selected">
    <div class="region-selected-item">
      <!-- 省 -->
      <el-select
        filterable
        v-model="regionObj.province"
        placeholder="请选择省/市"
        @change="selectChange(0)"
      >
        <el-option
          v-for="_province in provinceList"
          :key="_province.code"
          :label="_province.name"
          :value="_province.name"
        >
        </el-option>
      </el-select>
    </div>
    <div class="region-selected-item">
      <!-- 市 -->
      <el-select
        filterable
        v-model="regionObj.city"
        placeholder="市"
        @change="selectChange(1)"
      >
        <el-option
          v-for="_city in _cityList"
          :key="_city.code"
          :label="_city.name"
          :value="_city.name"
        >
        </el-option>
      </el-select>
    </div>
    <div class="region-selected-item">
      <!-- 区 -->
      <el-select
        filterable
        v-model="regionObj.area"
        placeholder="区/县"
        @change="selectChange(2)"
      >
        <el-option
          v-for="_area in mAreaList"
          :key="_area.code"
          :label="_area.name"
          :value="_area.name"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
/**
data - 总数据(省/地/县/乡)
province - 省级(省/直辖市/特别行政区)
city - 地级(城市)
area - 县级(区县)
town - 乡级(乡镇/街)
 */
const {
  data,
  province,
  city,
  area,
  town,
} = require("province-city-china/data");
export default {
  name: "WebRegionselected",
  props: {
    regionObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      tunnelingCity: [
        "110000",
        "120000",
        "310000",
        "500000",
        "810000",
        "820000",
      ],
      mAreaList: [],
    };
  },
  computed: {
    _cityList() {
      let find = this.provinceList.find(
        (item) => item.name === this.regionObj.province
      );
      if (find) {
        return this.cityList.filter((item) => item.province === find.province);
      }
      return [];
    },
  },
  mounted() {
    this.provinceList = province || [];
    this.cityList = city || [];
    this.areaList = area || [];
  },
  methods: {
    selectChange(index) {
      let tunnelingCityFind = this.provinceList.find(
        (item) => item.name === this.regionObj.province
      );
      switch (index) {
        case 0:
          this.regionObj.area = "";
          this.regionObj.city = "";
          this.mAreaList = [];

          if (
            tunnelingCityFind &&
            this.tunnelingCity.includes(tunnelingCityFind.code)
          ) {
            this.regionObj.city = this.regionObj.province;
            this.mAreaList = this.areaList.filter(
              (item) => item.province === tunnelingCityFind.province
            );
          }
          break;
        case 1:
          this.regionObj.area = "";
          let find = this.cityList.find(
            (item) => item.name === this.regionObj.city
          );
          if (find) {
            this.mAreaList = this.areaList.filter(
              (item) =>
                item.city === find.city && item.province === find.province
            );
          }
          break;
      }
      this.$forceUpdate();
      this.$emit("selectChange", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.region-selected {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  .region-selected-item {
    flex: 1;
    .el-select {
      width: 100%;
    }
  }
}
</style>
